<template>
    <div class="order-manual-dispatch">
        <el-card class="!border-none" shadow="never">
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                label-width="100px"
                class="mt-4"
            >
                <company-select 
                    @select-company="handleSelectCompany"
                    label="选择公司"
                    custom-class="w-[280px]"
                />
                <el-form-item label="成功数" prop="success_num">
                    <el-input
                        v-model.number="formData.success_num"
                        type="number"
                        placeholder="请输入成功数"
                        class="w-[280px]"
                    />
                </el-form-item>
                <el-form-item label="评论数" prop="comment_num">
                    <el-input
                        v-model.number="formData.comment_num"
                        type="number"
                        placeholder="请输入评论数"
                        class="w-[280px]"
                    />
                </el-form-item>
                <el-form-item label="投诉数" prop="complaint_num">
                    <el-input
                        v-model.number="formData.complaint_num"
                        type="number"
                        placeholder="请输入投诉数"
                        class="w-[280px]"
                    />
                </el-form-item>
                <el-form-item label="取消数" prop="cancel_num">
                    <el-input
                        v-model.number="formData.cancel_num"
                        type="number"
                        placeholder="请输入取消数"
                        class="w-[280px]"
                    />
                </el-form-item>
                <el-form-item label="违约数" prop="break_num">
                    <el-input
                        v-model.number="formData.break_num"
                        type="number"
                        placeholder="请输入违约数"
                        class="w-[280px]"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">提交</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="orderManualDispatch">
import type { FormInstance } from 'element-plus'
import CompanySelect from '@/components/company-select/index.vue'
import feedback from '@/utils/feedback'
import { manualDispatch } from '@/api/supervise/company'

const formRef = shallowRef<FormInstance>()

const formData = reactive({
    company_id: '',
    success_num: 1,
    comment_num: 0,
    complaint_num: 0,
    cancel_num: 0,
    break_num: 0
})

const formRules = {
    company_id: [
        { required: true, message: '请选择公司', trigger: 'change' }
    ],
    success_num: [
        { required: true, message: '请输入成功数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    comment_num: [
        { required: true, message: '请输入评论数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    complaint_num: [
        { required: true, message: '请输入投诉数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    cancel_num: [
        { required: true, message: '请输入取消数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    break_num: [
        { required: true, message: '请输入违约数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ]
}

const handleSelectCompany = (id: string | number) => {
    formData.company_id = id.toString()
}

const handleReset = () => {
    formRef.value?.resetFields()
    formData.success_num = 1
    formData.comment_num = 0
    formData.complaint_num = 0
    formData.cancel_num = 0
    formData.break_num = 0
}

const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            try {
                await manualDispatch(formData)
                feedback.msgSuccess('添加成功')
                handleReset()
            } catch (error) {
                console.error(error)
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.order-manual-dispatch {
    padding: 20px;
}
</style>